import React, { memo } from 'react';
import classnames from 'classnames';

import { numberFormat } from '@/utils/formatterUtil';

import EmptyPlaceHolder from '@/pages/SalaryManage/components/EmptyPlaceHolder';

import styles from './style.less';
import { showTypeMap } from '../paramMap';

const typeMap = {
    0: '',
    1: styles.remind,
    2: styles.warning
}

const RateWrapper = ({ type }) => {
    switch (type) {
        case '1':
            return <i className={classnames('icon', 'iconfont', 'iconTopArrowIcon', styles.rate, styles.up)}></i>
        case '2':
            return <i className={classnames('icon', 'iconfont', 'iconDownArrowIcon', styles.rate, styles.down)}></i>
        default:
            return ''
    }
}

const SalaryItemCard = memo(({ cardData }) => {
    const { salaryAmtTotal, salaryAmtTotalRate, salaryItemName, warnType, showType, upDownType } = cardData
    return (
        <div className={classnames(styles.card, typeMap[warnType])}>
            <h3 className={styles.cardTitle}>{salaryItemName}</h3>
            <p className={styles.cardAmt}>{numberFormat(salaryAmtTotal, '')}</p>
            <div className={styles.cardContrast}>
                <span className={styles.name}>{showTypeMap[showType]}：</span>
                <span className={styles.num}><RateWrapper type={upDownType}/>{ salaryAmtTotalRate.length === 0 ? <EmptyPlaceHolder /> : `${salaryAmtTotalRate}%`}</span>
            </div>
        </div>
    )
})

export default SalaryItemCard
